<template>
  <div class="content vscroll">
    <div style="display: inline-block; width: 100%">
      <el-row>
        <el-col :span="12">
          <h3>BIM配置清单</h3>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button size="small" type="primary" @click="addData()">添加</el-button>
          <el-button size="small" type="primary" @click="addDataByLayerTree()" style="margin-left: 5px">查看图层树</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="vscroll" style="overflow-y: auto; height: 290px">
      <div id="listData">
        <el-table
          :data="widgetAssetsList"
        >
          <template v-for="(item, index) in columns">
            <el-table-column
              :label="item.title"
              :prop="item.dataIndex"
              :key="index"
            >
            </el-table-column>
          </template>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <a
                class="edit-item"
                @click="upData(scope.row)"
                >编辑</a
              >
              <el-popconfirm
                title="是否要删除这个服务？"
                @confirm="deleteData(scope.row.id)"
                @cancel="deleteCancel"
                confirm-button-text="删除"
                cancel-button-text="取消"
              >
                <a class="edit-item" slot="reference">删除</a>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <config-info
        ref="serviceConfigInfo"
        :dynamicTitle="popupTitle"
        @save="save"
      ></config-info>
      <layer-tree-info ref="layerTreeInfo" :dynamicTitle="popupTitle"></layer-tree-info>
    </div>
  </div>
</template>

<script>
import configInfo from "./configInfo";
import LayerTreeInfo from "./LayerTreeInfo";
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    width: 120,
    ellipsis: true,
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    width: 100,
    align: "center",
    ellipsis: true,
  },
  // {
  //   title: "操作",
  //   dataIndex: "edit",
  //   key: "edit",
  //   align: "center",
  //   width: 60,
  //   scopedSlots: { customRender: "action" },
  // },
];
export default {
  components: {
    "config-info": configInfo,
    "layer-tree-info": LayerTreeInfo
  },
  data() {
    return {
      widgetAssetsList: [],
      columns,
      popupTitle: "",
      recordForm: null,
      pagination: {
        defaultPageSize: 5,
      },
    };
  },
  computed:{
  },
  watch:{
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取字段扩展配置信息
    getData() {
      this.widgetAssetsList = [];
      agcim.widgets.widgetExtendField.getWidgetInfoByCode("agcim-BIMRuleReview").then((res) => {
        this.widgetAssetsList = JSON.parse(res.content.widgetLevelsData);
      });
    },
    //添加BIM图层信息
    addData() {
      this.$refs["serviceConfigInfo"].addData("添加BIM图层服务");
    },
    //更新BIM图层信息
    //record更新的一条记录
    upData(record) {
      this.$refs["serviceConfigInfo"].updateData("修改BIM图层服务", record);
    },
    //根据行id删除BIM图层配置信息
    deleteData(id) {
      // agcim.widgets.widgetExtendField.deleteWidgtInfoByRowDataId(id,"agcim-BIMRuleReview")
      agcim.widgets.widgetExtendField.deleteWidgtTableDataByRowDataId(id,"agcim-BIMRuleReview")
      .then((res) => {
          if(res.success){
            this.$message.success("删除成功");
            this.getData();
          }
      });
    },
    //保存，添加/编辑数据
    save(data) {
      if (data["id"]) {
        // agcim.widgets.widgetExtendField.saveOrUpdataWidgtTableData(data,"agcim-BIMRuleReview")
        agcim.widgets.widgetExtendField.updataWidgtTableData(data,"agcim-BIMRuleReview")
          .then((res) => {
            if(res.success){
              this.$message.success("添加成功");
              this.getData();
            }
            else {
              this.$message.error("添加失败");
            }
        });
      } else {
        data["id"] = Cesium.createGuid();
        // agcim.widgets.widgetExtendField.addWidgtInfoData(data,"agcim-BIMRuleReview")
        agcim.widgets.widgetExtendField.addWidgtTableData(data,"agcim-BIMRuleReview")
          .then((res) => {
            if(res.success){
              this.$message.success("添加成功");
              this.getData();
            }
            else {
              this.$message.error("添加失败");
            }
        });
      }
    },
    //获取图层树的服务列表
    addDataByLayerTree() {
      this.popupTitle = "3DTILES服务";
      this.$refs["layerTreeInfo"].visible = true;
      this.$refs["layerTreeInfo"].getData();
    },
    deleteCancel() {},
  },
};
</script>
<style scoped>
::v-deep .ant-table-row td {
  padding-top: 8px;
  padding-bottom: 10px;
}
.el-table .edit-item{
  padding-right:  10px;
}
/* el-table表格hover 修改背景色 */
.el-table,
.el-table__expanded-cell {
  background: rgba(255, 255, 255, 0);
}
.el-table::v-deep th,
.el-table::v-deep tr {
  background: rgba(255, 255, 255, 0);
}
.el-table::v-deep thead {
  color: rgba(255, 255, 255, 0.8);
}
.el-table::v-deep {
  color: rgb(255, 255, 255);
}

.el-table::v-deep .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.el-table::v-deep .el-table__body tr.current-row > td {
  background-color: rgba(255, 255, 255, 0.3) !important;
}
.el-table::v-deep .el-table__body tr.hover-row.current-row > td,
.el-table::v-deep .el-table__body tr.hover-row--striped.current-row > td,
.el-table::v-deep .el-table__body tr.hover-row--striped > td,
.el-table::v-deep .el-table__body tr.hover-row > td {
  background: rgba(255, 255, 255, 0.3) !important;
}
</style>
